// webpack配置文件

//步骤1: 导入相关依赖 
//导入路径相关模块  path
let path = require('path');

//引入html插件
let HtmlWebpackPlugin = require('html-webpack-plugin');

//引入提取CSS插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入样式压缩插件
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//步骤2: 配置webpack并暴露出去
module.exports = {
    //配置入口 (多入口)
    // entry: './src/js/index.js',
    entry: {
        //公共样式
        commCss: './src/less/comm/index.js',
        //引入插件
        captha: './src/lib/captcha/captcha-mini.js',
        //公用js
        commDom: './src/js/comm/dom.js',
        commHttp: './src/js/comm/http.js',
        commUtiles: './src/js/comm/utils.js',
        // 阿里图库
        iconfont: './src/lib/iconfonts/index.js',
        //轮播插件
        swiper: './src/lib/swiper/index.js',
        //weUI
        weUi: './src/lib/weui/index.js',
        //每一个页面的入口文件      
        advertisement: './src/js/advertisement.js', //广告页
        login: './src/js/login.js', //登录页
        register: './src/js/register.js', //注册页
        homePage: './src/js/homePage.js', //首页
        run: './src/js/run.js', //运动页
        circle: './src/js/circle.js', //圈子
        mine: './src/js/mine.js', //我的 
        perData: './src/js/perData.js', //个人信息
        courseList: './src/js/courseList.js', //课程列表
        courseDetail: './src/js/courseDetail.js', //课程详情
        rideBycle: './src/js/rideBycle.js', //骑行
        startTraining: './src/js/startTraining.js', //开始运动
        sportsData: './src/js/sportsData.js' //运动数据
    },
    //配置出口 配置打包后文件放置的位置
    output: {
        path: path.resolve(__dirname, 'dist'), //配置文件打包后的目录
        filename: 'js/[name]-[hash:10].js', //配置打包后的文件名
        publicPath: './' //设置打包后的共用路径,默认路径
    },
    //配置加载器  loader
    module: { // module表示配置 加载器loader 的内容
        /* 
            rules: 表示设置加载器的规则 数据类型为数组 [{},{}]
                {}表示每一条规则 一种加载器就需要一个规则

            在{}中:有以下键名
                test: 表示匹配文件后缀的规则 
                loader: 表示使用单个加载器   'css-loader'
                use: 表示使用多个加载器 ['',''] 识别顺序 从后到前面识别
                options:  表示设置可选项,主要用于设置额外参数

        */
        rules: [
            //设置CSS加载器规则
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader, //提取css样式
                    options: {
                        publicPath: '../' //配置img文件路径
                    }
                }, 'css-loader']
            },
            //设置less加载器规则
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader', 'less-loader']
            },
            //设置css中img规则
            {
                test: /\.(jpg|png|gif)$/, //匹配img常用格式
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]', //设置输出来的图像文件名及后缀  ext: 后缀
                    limit: 10 * 1024, //文件大小限制 kb
                    esModule: false, //关闭 es模块化,使用 commonjs模块化,固定语法,不然html图像和js中的图像打包会出问题 
                    outputPath: 'img' //输出的目录
                }

            },
            //设置html中图像规则
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            //字体图标加载器
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]', //配置文件输出的格式  文件名.后缀名
                    outputPath: 'fonts' //输出的目录
                }
            },
            //Es6转ES5 低版本浏览器有兼容问题,不能识别es6语法
            {
                test: /\.js$/, //匹配.js文件
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除指定js目录
            }
        ]

    },
    //插件设置
    plugins: [
        /* 
            插件语法规则
                new 导入的插件名({
                    相关配置参数
                })
        */
        //广告
        new HtmlWebpackPlugin({
            template: './src/pages/advertisement.html', //设置需要处理的哪个html文件
            filename: 'advertisement.html', //表示输出的文件名
            chunks: ['commDom', 'advertisement', 'commCss']
        }),
        // 登录
        new HtmlWebpackPlugin({
            template: './src/pages/login.html', //设置需要处理的哪个html文件
            filename: 'login.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'login', 'commCss']

        }),
        //注册
        new HtmlWebpackPlugin({
            template: './src/pages/register.html', //设置需要处理的哪个html文件
            filename: 'register.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'register', 'commCss', 'captha', 'commUtiles']

        }),
        //首页
        new HtmlWebpackPlugin({
            template: './src/pages/homePage.html', //设置需要处理的哪个html文件
            filename: 'homePage.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'homePage', 'commCss', 'iconfont', 'commUtiles', 'swiper']

        }),
        //运动
        new HtmlWebpackPlugin({
            template: './src/pages/run.html', //设置需要处理的哪个html文件
            filename: 'run.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'run', 'commCss', 'iconfont', 'commUtiles']

        }),
        //圈子
        new HtmlWebpackPlugin({
            template: './src/pages/circle.html', //设置需要处理的哪个html文件
            filename: 'circle.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'circle', 'commCss', 'iconfont', 'commUtiles']

        }),
        //我的
        new HtmlWebpackPlugin({
            template: './src/pages/mine.html', //设置需要处理的哪个html文件
            filename: 'mine.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'mine', 'commCss', 'iconfont', 'commUtiles', ]

        }),
        // 个人资料
        new HtmlWebpackPlugin({
            template: './src/pages/perData.html', //设置需要处理的哪个html文件
            filename: 'perData.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'perData', 'commCss', 'iconfont', 'commUtiles', 'weUi']

        }),
        // 骑行
        new HtmlWebpackPlugin({
            template: './src/pages/rideBycle.html', //设置需要处理的哪个html文件
            filename: 'rideBycle.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'rideBycle', 'commCss', 'iconfont', 'commUtiles', 'weUi']

        }),
        // 课程列表
        new HtmlWebpackPlugin({
            template: './src/pages/courseList.html', //设置需要处理的哪个html文件
            filename: 'courseList.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'courseList', 'commCss', 'iconfont', 'commUtiles', 'weUi']

        }),
        // 列表详情
        new HtmlWebpackPlugin({
            template: './src/pages/courseDetail.html', //设置需要处理的哪个html文件
            filename: 'courseDetail.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'courseDetail', 'commCss', 'iconfont', 'commUtiles', 'weUi']

        }),
        //课程训练
        new HtmlWebpackPlugin({
            template: './src/pages/startTraining.html', //设置需要处理的哪个html文件
            filename: 'startTraining.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'startTraining', 'commCss', 'iconfont', 'commUtiles', 'weUi']

        }),
        //运动数据
        new HtmlWebpackPlugin({
            template: './src/pages/sportsData.html', //设置需要处理的哪个html文件
            filename: 'sportsData.html', //表示输出的文件名
            chunks: ['commDom', 'commHttp', 'sportsData', 'commCss', 'iconfont', 'commUtiles', ]

        }),
        //提取CSS
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),

        //压缩CSS
        new OptimizeCssAssetsWebpackPlugin()
    ],

    //模式设置   开发模式: development  生产模式: production(只有上线时,才执行一次即可)
    mode: process.env.NODE_ENV == 'dev' ? 'development' : 'production',
    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8848, // 端口
        open: true, // 自动打开服务
        publicPath: '/',
        openPage: 'advertisement.html' //设置默认打开的页面
    }
}